<script setup>
// 这里是组合式 API 的代码
import { ref,onMounted ,onUnmounted,nextTick } from 'vue';
// 确保 echarts 库已经安装，如果未安装，可以使用 npm install echarts 或 yarn add echarts 进行安装
import * as echarts from 'echarts';
// 定义一个 ref 来引用 DOM 元素
const mainDiv = ref(null);
import { defineProps } from 'vue';
import axios from "axios";
const studentScores = ref([]);
const props = defineProps(['id']);
const subjects = ref([]);
const subject_ids = ref([]);
const getSubjects = () => {
    axios.get('/api/score-subjects').then((response) => {
        subjects.value = response.data.data
        initChart();
        subjects.value = subjects.value.map((item) => {
            return {
                value: item.id,
                label: item.name,
            }
        })

    })

}

const handleSubjectSearch = ()=>{
    getSubjectsScores(props.id);
    initChart()
}
const getSubjectsScores = ()=>{

    axios.get('/api/student-scores?student_id='+props.id+'&subject_ids='+subject_ids.value).then((response) => {
        studentScores.value = response.data.data.data;
    });
    initChart();
}

let chartInstance = null;

const initChart = async () => {
    await nextTick(); // 确保DOM已经渲染完成
    chartInstance = echarts.init(mainDiv.value);
    // 模拟数据

    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    const  data =studentScores.value
    const subjects = studentScores.value.map((item) => item.subject.name)
    const dimensions = ['product']
    const bar = []
    new Set(subjects).forEach((item,index)=>{

        dimensions.push(item)
        bar.push({

            type: 'bar',

        })
    })
    console.log(dimensions)

    const score = []
    for (let i = 0; i < data.length; i++) {
        const item = data[i];
        const scoreItem = []
        scoreItem.push(item.test_date)
        new Set(subjects).forEach((item,index)=>{
            scoreItem.push(item==data[i].subject.name?data[i].score:0)
        })
        score.push(scoreItem)
    }

    console.log('xxxxx',score)
    // 配置项
    const options = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                dimensions,
                ...score
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: bar
    };
    // 设置图表配置项
    chartInstance.setOption(options)
}


onMounted(() => {
    studentScores.value = [];

    initChart();

});
getSubjects()
getSubjectsScores()
// onUnmounted(() => {
//     if (chartInstance) {
//         chartInstance.dispose();
//         chartInstance = null;
//     }
// });
</script>

<template>
    <div class="tool">
        <el-select
            v-model="subject_ids"
            multiple
            placeholder="科目"
            style="width: 240px;margin-right: 20px;"
        >
            <el-option
                v-for="item in subjects"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <el-button  type="primary"  @click="handleSubjectSearch">搜索</el-button>
    </div>
    <el-table :data="studentScores" style="width: 100%">
        <el-table-column prop="test_date" label="考核时间" width="180"/>
        <el-table-column label="人员" width="80">
            <template #default="scope">
                {{scope.row.student.name}}
            </template>
        </el-table-column>
        <el-table-column label="科目" width="100">
            <template #default="scope">
                {{scope.row.subject.name}}
            </template>
        </el-table-column>
        <el-table-column sortable prop="score" label="成绩" width="100"/>
        <el-table-column prop="yk_number" label="应考人数" width="100"/>
        <el-table-column prop="yk_percent" label="实考人数" width="100"/>
        <el-table-column prop="grade" label="评定" width="100"/>
    </el-table>
    <div ref="mainDiv" style="width: 900px; height: 600px;margin-top: 20px"></div>
</template>

<style scoped>

</style>
